<%@ page import="com.party.core.model.system.TargetType" %>
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="../include/tag.jsp" %>
<%@ taglib prefix="memberForm" uri="http://www.tongxingzhe.cn/memberForm" %>
<!DOCTYPE html>
<html lang="zh">
<head>
    <title>${event == null ? '发布' : '编辑'}主题</title>
    <%@include file="../include/commonFile.jsp" %>
    <script src="//api.map.baidu.com/api?v=2.0&ak=2izIwlMmDVH737ms8m4Y8uHsoxtEIR65"></script>
    <link rel="stylesheet" href="${ctx}/css/common/list.css">
    <link rel="stylesheet" href="${ctx}/css/ui/activity/publish_form.css">
    <link rel="stylesheet" href="${ctx}/static/uploadCI/upload.css">
    <style TYPE="text/css">
        .error,.error:focus {
            border-color: #FF5722!important;
        }
        .amount-tip {
            position: relative;
            top: 3px;
        }

        .multiple-activity .activity-num {
            float: left;
            padding: 9px 15px;
            width: 100px;
            font-weight: 400;
            text-align: right;
            vertical-align: top;
        }

        .multiple-activity .activity-content {
            background-color: rgba(242, 242, 242, 1);
            width: calc(100% - 140px);
            display: inline-block;
            padding: 10px 10px;
            padding-left: 0px;
            float: left;
        }

        .multiple-activity .activity-content .activity-place {
            float: left;
        }

        .multiple-activity .activity-content .m-height {
            min-height: 38px;
        }

        .multiple-activity .activity-content .activity-label {
            display: inline-block;
            float: left;
            height: 38px;
            line-height: 38px;
            width: 70px;
            padding-left: 10px;
            padding-right: 10px;
        }

        .multiple-activity .activity-content .activity-opt {
            width: 50px;
            float: left;
        }

        .multiple-activity .activity-content .activity-opt .icon-roundclose {
            font-size: 28px;
            color: #e8473f;
            display: block;
            margin-top: 24px;
            margin-left: 10px;
        }
    </style>
</head>
<body>
<!--头部-->
<%@include file="../include/header.jsp" %>
<div class="index-outside">
    <%@include file="../include/sidebar.jsp" %>
    <!--内容-->
    <section>
        <div class="section-main">
            <!-- 正文请写在这里 -->
            <div class="add-form-content">
                <form id="myForm" class="layui-form mt20" method="post" action="${ctx}/crowdfundMultiple/event/save.do">
                    <div class="preview-box">
                        <div class="top-tip">
                            <span class="tip-inner"><span class="tip-title">效果预览</span></span>
                        </div>
                        <a class="preview-btn layui-btn layui-btn-danger layui-btn-sm" href="javascript:void(0)"
                           lay-submit lay-filter="*">
                            <i class="iconfont icon-refresh btn-icon"></i>预览
                        </a>
                        <iframe style="width: 360px;height: 760px;" frameborder="0"
                                src="${ctx}/phone/preview.do?url=/micWeb/html/project/theme_preview.html?id=${event.id}"></iframe>
                    </div>
                    <div class="form-outer">
                        <input type="hidden" lay-verify="groupIsExpire"/>
                        <input type="hidden" name="id" value="${event.id}"/>
                        <input type="hidden" name="checkStatus" value="${event.checkStatus}"/>
                        <input type="hidden" name="multipleActStr" />
                        <input type="hidden" id="multiActList" name="multiActList" />
                        <div class="layui-form-item">
                            <label class="layui-form-label">主题名称<span class="f-verify-red">*</span></label>
                            <div class="layui-input-block">
                                <input type="text" maxlength="50" name="name" lay-verify="name" autocomplete="off"
                                       class="layui-input margin-right" value="${event.name}" style="width: 50%; "/>
                                <div class="layui-form-mid layui-word-aux">主题名称，最多50字符</div>
                                <div class="cl"></div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">活动海报<span class="f-verify-red">*</span></label>
                            <div class="cover-content">
                                <input type="hidden" name="pic" id="pic" lay-verify="pic" value="${event.pic}" />
                                <c:if test="${event == null || empty event.pic}">
                                    <span id="cover-img" class="cover-img" style="background-image:url(${ctx}/image/posterImg.png)"></span>
                                </c:if>
                                <c:if test="${event != null && not empty event.pic}">
                                    <span id="cover-img" class="cover-img" style="background-image:url('${event.pic}')"></span>
                                </c:if>
                                <div class="u-single-upload">
                                    <c:if test="${not empty event.id}">
                                        <a class="layui-btn layui-btn-danger" id="sel_pic_img">更换海报</a>
                                    </c:if>
                                    <c:if test="${empty event.id}">
                                        <a class="layui-btn layui-btn-danger" id="sel_pic_img">添加海报</a>
                                    </c:if>
                                </div>
                                <div class="form-word-aux">建议尺寸：800x450</div>
                            </div>
                        </div>
                        <div class="split-line"></div>
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">人数上限<span class="f-verify-red">*</span></label>
                                <div class="layui-input-inline">
                                    <input type="number" min="1" name="limitNum" lay-verify="limitNum" autocomplete="off"
                                           placeholder="请输入报名人数上限" class="layui-input" value="${event.limitNum}">
                                </div>
                                <div class="layui-form-mid layui-word-aux">仅可输入数字</div>
                            </div>
                        </div>
                        <div id="multiActDiv">
                            <c:set var="numArray" value="${fn:split('一,二,三,四,五', ',')}"></c:set>
                            <c:forEach items="${eventGradations}" var="eventGradation" varStatus="status">
                                <div class="layui-form-item multiple-activity" data-id="${eventGradation.id}"
                                     data-area="${eventGradation.area}" data-cityid="${eventGradation.cityId}">
                                    <label class="activity-num">活动${numArray[status.index]}</label>
                                    <div class="activity-content">
                                        <div class="activity-place">
                                            <div class="m-height mb10">
                                                <div class="activity-label">活动地点</div>
                                                <div class="layui-input-inline">
                                                    <select name="cityId-attr" lay-verify="cityId" lay-filter="cityId">
                                                        <option value="" title="">请选择城市</option>
                                                    </select>
                                                </div>
                                                <div class="layui-input-inline">
                                                    <select name="area-attr" lay-verify="area_select" lay-filter="area" data-load-data="false">
                                                        <option value="" title="">请选择区域</option>
                                                    </select>
                                                </div>
                                                <div class="layui-input-inline">
                                                    <input type="text" name="place-attr" placeholder="请填写活动场所"
                                                           class="layui-input" value="${eventGradation.place}" />
                                                </div>
                                            </div>
                                            <div class="m-height">
                                                <div class="activity-label">活动信息</div>
                                                <div class="layui-input-inline">
                                                    <input type="number" min="0.01" name="price-attr" lay-verify="price" readonly
                                                           placeholder="活动金额" class="layui-input" value="${eventGradation.price}" />
                                                </div>
                                                <div class="layui-input-inline">
                                                    <input type="text" id="activity-end-${status.index}" name="endDate-attr"
                                                           lay-verify="endDate" placeholder="请选择众筹截止时间" readonly
                                                           class="layui-input" value="<fmt:formatDate value='${eventGradation.endTime}' pattern="yyyy-MM-dd HH:mm" />" />
                                                </div>
                                            </div>
                                        </div>
                                            <%--<div class="activity-opt" onclick="txz.multipleEvent._deleteActivity(this)">
                                                <i class="iconfont icon-roundclose"></i>
                                            </div>--%>
                                    </div>
                                </div>
                            </c:forEach>
                            <c:if test="${fn:length(eventGradations) == 0}">
                                <div class="layui-form-item multiple-activity">
                                    <label class="activity-num">活动一</label>
                                    <div class="activity-content">
                                        <div class="activity-place">
                                            <div class="m-height mb10">
                                                <div class="activity-label">活动地点</div>
                                                <div class="layui-input-inline">
                                                    <select name="cityId-attr" lay-verify="cityId" lay-filter="cityId">
                                                        <option value="" title="">请选择城市</option>
                                                        <c:forEach var="city" items="${citys}">
                                                            <option value="${city.id}">${city.name}</option>
                                                        </c:forEach>
                                                    </select>
                                                </div>
                                                <div class="layui-input-inline">
                                                    <select name="area-attr" lay-verify="area_select" lay-filter="area">
                                                        <option value="" title="">请选择区域</option>
                                                    </select>
                                                </div>
                                                <div class="layui-input-inline">
                                                    <input type="text" name="place-attr" placeholder="请填写活动场所" class="layui-input"/>
                                                </div>
                                            </div>
                                            <div class="m-height">
                                                <div class="activity-label">活动信息</div>
                                                <div class="layui-input-inline">
                                                    <input type="number" min="0.01" name="price-attr" lay-verify="price"
                                                           placeholder="活动金额" class="layui-input"/>
                                                </div>
                                                <div class="layui-input-inline">
                                                    <input type="text" id="activity-end-0" name="endDate-attr" lay-verify="endDate"
                                                           readonly placeholder="请选择众筹截止时间" class="layui-input"/>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="activity-opt dn" onclick="txz.multipleEvent._deleteActivity(this)">
                                            <i class="iconfont icon-roundclose"></i>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-form-item multiple-activity">
                                    <label class="activity-num">活动二</label>
                                    <div class="activity-content">
                                        <div class="activity-place">
                                            <div class="m-height mb10">
                                                <div class="activity-label">活动地点</div>
                                                <div class="layui-input-inline">
                                                    <select name="cityId-attr" lay-verify="cityId" lay-filter="cityId">
                                                        <option value="" title="">请选择城市</option>
                                                        <c:forEach var="city" items="${citys}">
                                                            <option value="${city.id}">${city.name}</option>
                                                        </c:forEach>
                                                    </select>
                                                </div>
                                                <div class="layui-input-inline">
                                                    <select name="area-attr" lay-verify="area_select" lay-filter="area">
                                                        <option value="" title="">请选择区域</option>
                                                    </select>
                                                </div>
                                                <div class="layui-input-inline">
                                                    <input type="text" name="place-attr" placeholder="请填写活动场所" class="layui-input"/>
                                                </div>
                                            </div>
                                            <div class="m-height">
                                                <div class="activity-label">活动信息</div>
                                                <div class="layui-input-inline">
                                                    <input type="number" min="0.01" name="price-attr" lay-verify="price"
                                                           placeholder="活动金额" class="layui-input"/>
                                                </div>
                                                <div class="layui-input-inline">
                                                    <input type="text" id="activity-end-1" name="endDate-attr" lay-verify="endDate"
                                                           readonly placeholder="请选择众筹截止时间" class="layui-input"/>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="activity-opt dn" onclick="txz.multipleEvent._deleteActivity(this)">
                                            <i class="iconfont icon-roundclose"></i>
                                        </div>
                                    </div>
                                </div>
                            </c:if>
                        </div>
                        <c:if test="${empty event.id}">
                            <div class="layui-form-item">
                                <label class="layui-form-label"></label>
                                <div class="layui-input-block">
                                    <a class="layui-btn layui-btn-danger ${fn:length(eventGradations) == 5 ? 'layui-btn-disabled' : ''}" href="javascript:txz.multipleEvent._addActivity()" id="add_activity">添加活动</a>
                                </div>
                            </div>
                        </c:if>
                        <div class="layui-form-item">
                            <label class="layui-form-label">众筹攻略<span class="f-verify-red">*</span></label>
                            <div class="layui-input-block">
                                <input type="radio" name="strategyState" value="0" title="显示" ${event==null || event.strategyState==0 ? 'checked="checked"' : ''}>
                                <input type="radio" name="strategyState" value="1" title="不显示" ${event !=null && event.strategyState==1 ? 'checked="checked"' : ''}>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">播放背景乐<span class="f-verify-red">*</span></label>
                            <div class="layui-input-block">
                                <input type="radio" name="isPlayMusic" lay-filter="isPlayMusic" value="0" title="否"
                                    ${event==null || event.isPlayMusic==0 ? 'checked="checked"' : ''} />
                                <input type="radio" name="isPlayMusic" lay-filter="isPlayMusic" value="1" title="是"
                                    ${event !=null && event.isPlayMusic==1 ? 'checked="checked"' : ''} />
                            </div>
                        </div>
                        <div class="layui-form-item" id="audioDiv" ${event==null || event.isPlayMusic==0 ? 'style="display:none"' : ''}>
                            <span class="layui-inline"><label class="layui-form-label">背景乐<span class="f-verify-red">*</span></label>
                                <div class="layui-input-inline">
                                    <select name="audioId" id="audioId" lay-verify="audioId" lay-filter="audioId">
                                        <option value="" title="">请选择背景乐</option>
                                    </select>
                                </div>
                                <span id="audioUrlId" style="display: none;">
                                    <audio style="height: 40px;" src="" controls="controls" preload></audio>
                                </span>
                            </span>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">隐藏数据<span class="f-verify-red">*</span></label>
                                <div class="layui-input-inline" style="width: 250px">
                                    <input type="radio" name="templateStyle" value="0" title="否"
                                        ${event==null || event.templateStyle==0 ? 'checked="checked"' : ''} />
                                    <input type="radio" name="templateStyle" value="1" title="是"
                                        ${event !=null && event.templateStyle==1 ? 'checked="checked"' : ''} />
                                </div>
                                <div class="dib" style="width: calc(100% - 390px);">
                                    <a class="red tip-link" href="javascript:openHiddenShow('手机效果展示图', '#hidden_show_plane')">
                                        <i class="iconfont icon-piclight"></i>效果展示图</a>
                                    <p class="gray">说明:在前期众筹数据较少时，适当使用隐藏数据功能，可以避免推广的尴尬，等数据较多时可再调整</p>
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-inline" style="vertical-align: bottom;">
                                <label class="layui-form-label">个人排行榜<span class="f-verify-red">*</span></label>
                                <div class="layui-input-inline" style="width: 250px">
                                    <input type="radio" name="personalRanking" value="0" lay-filter="personalRanking"
                                           title="默认显示全部" ${empty event.id || event.personalRanking == 0 ? 'checked="checked"' : ''}>
                                    <input type="radio" name="personalRanking" value="2" lay-filter="personalRanking"
                                           title="不显示" ${not empty event.id && event.personalRanking == 2 ? 'checked="checked"' : ''}>
                                </div>
                                <div class="dib" style="width: calc(100% - 390px);">
                                    <a class="red tip-link"
                                       href="javascript:openHiddenShow('手机效果展示图', '#hidden_show_plane2')">
                                        <i class="iconfont icon-piclight"></i>效果展示图</a>
                                    <p class="gray">说明：排行榜显示该主题下的报名人员排名，默认显示全部人数</p>
                                </div>
                            </div>
                        </div>
                        <div class="split-line"></div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">众筹宣言<span class="f-verify-red">*</span></label>
                            <div class="layui-input-block">
                                <textarea maxlength="100" class="layui-textarea calc-110" name="crowdDeclaration"
                                          lay-verify="crowd_xy" placeholder="请输入众筹宣言，让大家来参与报名吧！">${event.crowdDeclaration}</textarea>
                                <div class="layui-form-mid layui-word-aux">最多100字符</div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">支持宣言<span class="f-verify-red">*</span></label>
                            <div class="layui-input-block">
                                <textarea maxlength="100" class="layui-textarea calc-110" name="supportDeclaration"
                                          lay-verify="support_xy" placeholder="请输入支持宣言，让大家支持本次活动吧！">${event.supportDeclaration}</textarea>
                                <div class="layui-form-mid layui-word-aux">最多100字符</div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">联合发起宣言<span class="f-verify-red">*</span></label>
                            <div class="layui-input-block">
                                <textarea maxlength="100" class="layui-textarea calc-110" name="representDeclaration"
                                          lay-verify="represent_xy" placeholder="请输入联合发起宣言，让大家来参与联合发起吧！">${event.representDeclaration}</textarea>
                                <div class="layui-form-mid layui-word-aux">最多100字符</div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">活动描述</label>
                            <div class="layui-input-block">
                                <textarea maxlength="100" class="layui-textarea calc-110" name="remarks"
                                          placeholder="活动描述">${event.remarks}</textarea>
                                <div class="layui-form-mid layui-word-aux">最多100字符</div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">轮播图</label>
                            <a href="javascript:openUploadCI()"class="layui-btn  layui-btn-danger">+添加图片</a>
                            <div class="layui-input-block" style="min-height: auto;">
                                <input type="hidden" name="picList" id="picList" lay-verify="picList" />
                                <div class="zc-ci-img-list ci-img-list" id="img_list">
                                    <c:forEach var="resource" items="${picList}">
                                        <div class="item" data-url="${resource.resourceUrl}">
                                            <div class="img-item" style="background-image: url('${resource.resourceUrl}')">
                                                <i class="layui-icon del-icon" onclick="delQImg('${resource.resourceUrl}',this, '${resource.id}')">ဇ</i>
                                            </div>
                                        </div>
                                    </c:forEach>
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">视频</label>
                            <div class="layui-input-block">
                                <input type="hidden" name="videoList" id="videoList" />
                                <div style="margin-bottom: 10px;">
                                    <textarea class="layui-textarea video-link margin-right calc-110" id="vide_code"
                                              readonly
                                              style="min-height: 80px;">${video.resourceUrl}</textarea>
                                    <a href="javascript:openUploadVideo()" class="red" style="display: inline-block; margin-bottom: 5px">添加视频</a>
                                    <a href="javascript:clearValue()" class="red" style="display: inline-block">清除视频</a>
                                    <div class="cl"></div>
                                </div>
                                <input type="text" maxlength="30" placeholder="请输入视频简介" value="${video.remarks}"
                                       class="layui-input video-remarks margin-right" style="width: calc(90% - 190px);"/>
                                <div class="layui-form-mid layui-word-aux">最多30字符</div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">活动详情<span class="f-verify-red">*</span></label>
                            <div class="layui-input-block">
                                <script id="ueditor1" type="text/plain"></script>
                                <div style="display: none" id="contentView">${activityDetail.content}</div>
                                <input type="hidden" name="content" id="content" lay-verify="content" data-link-ue="ueditor1" />
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">报名相关<span class="f-verify-red">*</span></label>
                            <div class="layui-input-block">
                                <script id="relatedUeditor" type="text/plain"></script>
                                <div style="display: none" id="applyRelatedView">${activityDetail.applyRelated}</div>
                                <input type="hidden" name="applyRelated" id="applyRelated" lay-verify="applyRelated" data-link-ue="relatedUeditor" />
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">参赛标准<span class="f-verify-red">*</span></label>
                            <div class="layui-input-block">
                                <script id="standardUeditor" type="text/plain"></script>
                                <div style="display: none" id="matchStandardView">${activityDetail.matchStandard}</div>
                                <input type="hidden" name="matchStandard" id="matchStandard" lay-verify="matchStandard" data-link-ue="standardUeditor" />
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <a href="javascript:void(0)" class="layui-btn layui-btn-danger" lay-submit lay-filter="*">立即提交</a>
                                <a href="${ctx}/crowdfund/event/list.do" class="layui-btn layui-btn-primary">取消</a>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <!--底部-->
        <%@include file="../include/footer.jsp" %>
        <div style="display: none" id="create_date_str">
            <fmt:formatDate value="${event.createDate}" pattern="yyyy-MM-dd HH:mm:ss"/>
        </div>
        <c:set var="expirationTime" value="${memberForm:getExpirationTimeById(sessionScope.newCurrentUser.id)}"/>
        <c:set var="isExpire" value="${memberForm:isExpire(sessionScope.newCurrentUser.id, null)}"/>
    </section>
    <div id="hidden_show_plane" class="pt15" style="display: none;">
        <div class="dib l" style="width: 50%;">
            <div class="pt10 pb10" style="border-right: 1px solid #7f7f7f;">
                <div class="show-img" style="background-image: url(../../image/activity/hidden_show_before.jpg);"></div>
            </div>
            <p class="mt10 f18 tc">（未隐藏数据前）</p>
        </div>
        <div class="dib l" style="width: 50%;">
            <div class="pt10 pb10">
                <div class="show-img" style="background-image: url(../../image/activity/hidden_show_after.jpg);"></div>
            </div>
            <p class="mt10 f18 tc">（隐藏数据后）</p>
        </div>
    </div>
    <div id="hidden_show_plane2" class="pt15" style="display: none;">
        <div class="show-img" style="background-image: url(../../image/activity/personal_ranking.png); width: 92%!important; height: 844px!important;"></div>
    </div>
</div>

<script type="text/javascript" src="${ctxStatic}/UEditor/ueditor.config.js"></script>
<script type="text/javascript" src="${ctxStatic}/UEditor/ueditor.all.js"></script>
<script type="text/javascript" src="${ctxStatic}/UEditor/myplugin/uploadCI.js"></script>
<script type="text/javascript" src="${ctxStatic}/UEditor/myplugin/uploadVideo.js"></script>
<!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
<!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
<script type="text/javascript" src="${ctxStatic}/UEditor/lang/zh-cn/zh-cn.js"></script>

<script type="text/javascript" src="${ctx}/script/common/form_cache.js"></script>
<script type="text/html" id="multiple_activity_template">
    <div class="layui-form-item multiple-activity" data-area="{{ d.data && d.data.areaNameSelect || '' }}">
        <label class="activity-num">活动{{ d.num }}</label>
        <div class="activity-content">
            <div class="activity-place">
                <div class="m-height mb10">
                    <div class="activity-label">活动地点</div>
                    <div class="layui-input-inline">
                        <select name="cityId-attr" lay-verify="cityId" lay-filter="cityId">
                            <option value="" title="">请选择城市</option>
                            {{#  layui.each(d.citys, function(index, item){ }}
                                {{# if(d.data && d.data.cityId && d.data.cityId == item.id){ }}
                                    <option value="{{ item.id }}" selected>{{ item.name }}</option>
                                {{# }else{ }}
                                    <option value="{{ item.id }}">{{ item.name }}</option>
                                {{# } }}
                            {{# }); }}
                        </select>
                    </div>
                    <div class="layui-input-inline">
                        {{# if(d.data) { }}
                            {{# if(d.data.areaNameSelect || !d.data.areaNameInput && (d.data.cityName && d.data.cityName != '其他地区')){ }}
                                <select name="area-attr" lay-verify="area_select" lay-filter="area" data-load-data="false">
                                    <option value="" title="">请选择区域</option>
                                </select>
                            {{# } else if(d.data.areaNameInput || (d.data.cityName && d.data.cityName == '其他地区')){ }}
                                <input type="text" name="area-input-attr" placeholder="请填写区域" lay-verify="area_input" class="layui-input" value="{{ d.data.areaNameInput }}" />
                            {{# } }}
                        {{# } else { }}
                            <select name="area-attr" lay-verify="area_select" lay-filter="area" data-load-data="true">
                                <option value="" title="">请选择区域</option>
                            </select>
                        {{# } }}
                    </div>
                    <div class="layui-input-inline">
                        <input type="text" name="place-attr" placeholder="请填写活动场所" class="layui-input" value="{{ d.data && d.data.place || '' }}" />
                    </div>
                </div>
                <div class="m-height">
                    <div class="activity-label">活动信息</div>
                    <div class="layui-input-inline">
                        <input type="number" min="0.01" name="price-attr" lay-verify="price" placeholder="活动金额" class="layui-input" value="{{ d.data && d.data.price || '' }}" />
                    </div>
                    <div class="layui-input-inline">
                        <input id="activity-end-{{ d.index }}" type="text" name="endDate-attr" lay-verify="endDate" readonly
                               value="{{ d.data && d.data.endDate || '' }}"
                               placeholder="请选择众筹截止时间" class="layui-input"/>
                    </div>
                </div>
            </div>
            <div class="activity-opt" onclick="txz.multipleEvent._deleteActivity(this)">
                <i class="iconfont icon-roundclose"></i>
            </div>
        </div>
    </div>
</script>
<script>
    var reg = /^([0-9]|([1-9][0-9]{0,9}))$/;
    var ue = UE.getEditor('ueditor1', {
        initialFrameWidth: 700,
        initialFrameHeight: 500
    });
    var relatedUeditor = UE.getEditor('relatedUeditor', {
        initialFrameWidth: 700,
        initialFrameHeight: 500
    });
    var standardUeditor = UE.getEditor('standardUeditor', {
        initialFrameWidth: 700,
        initialFrameHeight: 500
    });

    var form, formcache, maxNum = 5;
    var isPlayMusicVal = '${event.isPlayMusic}';
    var audioId_val = '${event.audioId}';
    var laytpl = null;
    var numArray = ['一', '二', '三', '四', '五'], cityArray = [];
    var minEndDate, maxEndDate;

    function verify(value, title) {
        if (value == "") {
            return "请填写" + title;
        }
    }

    txz.initHeader({
        nav: [{
            name: '众筹主题',
            href: '${ctx}/crowdfundMultiple/event/list.do'
        }, {
            name: '${event == null ? '发布' : '编辑'}主题',
            curr: true
        }],
        info: '<span class="f12">共<b>${page.totalCount}</b>条记录',
        btns: [{
            type: 'back'
        }]
    });

    $(function () {
        layui.use(['form', 'laydate', 'laytpl'], function () {
            form = layui.form, laydate = layui.laydate, laytpl = layui.laytpl;

            loadAudioSelect(audioId_val);

            txz.multipleEvent._init();

            //自定义验证规则
            form.verify({
                groupIsExpire: function () {
                    if ('${isExpire}' == 'true') {
                        txz.openExpireDialog();
                        return false;
                    }
                    return "";
                },
                name: function (value, ele) {
                    return verify(value, "主题名称");
                },
                crowd_xy: function (value) {
                    return verify(value, "众筹宣言");
                },
                support_xy: function (value) {
                    return verify(value, "支持宣言");
                },
                represent_xy: function (value) {
                    return verify(value, "联合发起宣言");
                },
                pic: function (value) {
                    if (value == "") {
                        return "请上传活动海报";
                    }
                },
                area_select: function (value) {
                    if (value == "") {
                        return "请选择活动区域";
                    }
                },
                area_input: function (value) {
                    if (value == "") {
                        return "请输入活动区域";
                    }
                },
                cityId: function (value) {
                    if (value == "") {
                        return "请选择活动举办的城市";
                    }
                },
                limitNum: function (value) {
                    if (value == "") {
                        return "请输入活动人数上限";
                    } else if (!util.checkNumber(value)) {
                        return "请输入正确的数字";
                    } else if (parseInt(value) == 0) {
                        return "请输入大于0的数字";
                    }
                },
                price: function (value) {
                    if (value == "") {
                        return "请输入活动报名金额";
                    } else if (!util.checkFloat(value)) {
                        return "请输入正确的金额";
                    } else if (parseFloat(value) == 0) {
                        return "请输入大于0的金额";
                    }
                },
                endDate: function (value) {
                    if (value == "") {
                        return "请选择截止时间";
                    }
                },
                // 背景乐
                audioId: function (value) {
                    if (isPlayMusicVal == 1) {
                        if (value == "") {
                            return "请选择背景乐";
                        }
                    }
                },
                content: function (value) {
                    $("#contentView").html(ue.getContent());
                    var content = $("#contentView").html();
                    if (content == "") {
                        return "请填写活动详情";
                    }
                },
                matchStandard: function (value) {
                    $("#matchStandardView").html(standardUeditor.getContent());
                    var content = $("#matchStandardView").html();
                    if (content == "") {
                        return "请填写参赛标准";
                    }
                },
                applyRelated: function (value) {
                    $("#applyRelatedView").html(relatedUeditor.getContent());
                    var content = $("#applyRelatedView").html();
                    if (content == "") {
                        return "请填写报名相关";
                    }
                },
                picList: function () {
                    var length = $("#img_list .img-item").length;
                    if (length > 5) {
                        return "最多只允许上传5张图片";
                    }
                }
            });

            form.on('select(audioId)', function (data) {
                var audioUrl_opction_val = data.elem[data.elem.selectedIndex].title;
                isShowAudiolabel(audioUrl_opction_val)
            });

            //背景乐
            form.on('radio(isPlayMusic)', function (data) {
                isPlayMusicVal = data.value;
                if (isPlayMusicVal == 0) {
                    $("[name=audioId]").val("");
                    isShowAudiolabel("");
                    $("#audioDiv").hide();
                } else {
                    $("#audioDiv").show();
                }
                form.render('select');
            });

            // 城市
            form.on('select(cityId)', function (data) {
                var parent = $(data.elem).closest('.multiple-activity');
                var cityName = $(parent).find('[name=cityId-attr]').find('option:selected').text();
                txz.multipleEvent._loadAreaListByCity(cityName, parent);
            });

            //监听提交
            form.on('submit', function (data) {
                formSubmit(data);
            });
            form.render('radio');
        });

        ue.addListener('ready', function () {
            this.setHeight(500);
            if ($("#contentView").html() != "") {
                this.setHeight(850);
            }
            this.setContent($("#contentView").html());
            //等待ueditor加载完后加载缓存
            if (!'${event.id}') { //新增时使用
                formcache = new fCache({
                    fCacheKey: '${event.id}' + '_zcact',//暂存的key
                    cacheCallback: loadCacheData,//获取到缓存后加载的方法
                    getFormData: getFormData
                }).init();
            }
        });
        ue.addListener('blur', function () {
            $("#contentView").html(ue.getContent());
        });

        relatedUeditor.addListener('ready', function () {
            this.setContent($("#applyRelatedView").html());
            this.setHeight(500);
        });
        relatedUeditor.addListener('blur', function () {
            $("#applyRelatedView").html(ue.getContent());
        });

        standardUeditor.addListener('ready', function () {
            this.setContent($("#matchStandardView").html());
            this.setHeight(500);
        });
        standardUeditor.addListener('blur', function () {
            $("#matchStandardView").html(ue.getContent());
        });

        $('#sel_pic_img').click(function () {
            txz.openSelImg({
                min: 1,
                max: 1,
                info: '建议尺寸：800x450',
                type: '<%=TargetType.ZC_ACTIVITY.getCode()%>',
                cb: function (imgs) {
                    $('#cover-img').css('background-image', 'url(' + imgs[0].path + ')');
                    $('#pic').val(imgs[0].path);
                }
            })
        })
    });

    //此方法用于加载缓存数据
    function loadCacheData(cacheData) {
        //跑马灯
        if (cacheData['picList']) {
            var picList = JSON.parse(cacheData['picList']);
            if (picList && picList.length > 0) {
                $("#img_list").html('');
                for (var i = 0, item; i < picList.length; i++) {
                    item = picList[i];
                    $("#img_list").append('<div class="item" data-url="' + item.pic + '">' +
                        '<div class="img-item" style="background-image: url(' + item.pic + ')">' +
                        '<i class="layui-icon del-icon" onclick="delQImg(\'' + item.pic +
                        '\',this, \'\')">ဇ</i>' +
                        '</div>' +
                        //'<input class="text-item" type="text" placeholder="图片描述" />'+
                        '</div>');
                }
            }
        }
        //加载视频数据
        if (cacheData['videoList']) {
            var video = JSON.parse(cacheData['videoList']);
            $('.video-link').val(video.pic);
            $('.video-remarks').val(video.remarks);
        }
        //加载封面图
        if (cacheData['pic']) {
            $('#cover-img').css('background-image', 'url(' + cacheData['pic'] + ')');
        }
        // 加载多场活动
        if (cacheData['multiActList']) {
            var _multiActList = JSON.parse(cacheData['multiActList']);
            if (_multiActList.length > 0) {
                $(".multiple-activity").remove();
                var getTpl = $("#multiple_activity_template").html();
                for (var i = 0; i < _multiActList.length; i++) {
                    var content = $(".multiple-activity:last");
                    if (content.length > 0) {
                        laytpl(getTpl).render({
                            num: numArray[i],
                            citys: cityArray,
                            index: i,
                            data: _multiActList[i]
                        }, function (html) {
                            content.after(html);
                        });
                    } else {
                        content = $("#multiActDiv");
                        laytpl(getTpl).render({
                            num: numArray[i],
                            citys: cityArray,
                            index: i,
                            data: _multiActList[i]
                        }, function (html) {
                            content.html(html);
                        });
                    }
                }
                txz.multipleEvent._loadCityAndArea();
                txz.multipleEvent._initEndDate();
            }
        }
        var isPlayMusic = cacheData['isPlayMusic'];
        if (isPlayMusic && parseInt(isPlayMusic) == 1) {
            $("#audioDiv").show();
        }
        form.render();
    }

    function getFormData() {
        $("#content").val(ue.getContent().replace(/&quot;/gi, ""));
        $("#applyRelated").val(relatedUeditor.getContent().replace(/&quot;/gi, ""));
        $("#matchStandard").val(standardUeditor.getContent().replace(/&quot;/gi, ""));
        // 跑马灯
        var array = new Array();
        $("#img_list .item").each(function (index, element) {
            var pic = {
                pic: $(element).attr("data-url"),
                remarks: $(element).find(".text-item").val() || ''
            }
            array.push(pic);
        });
        $("#picList").val(JSON.stringify(array));
        // 视频
        var video = {
            pic: $(".video-link").val(),
            remarks: $(".video-remarks").val()
        }
        $("#videoList").val(JSON.stringify(video));

        var _mulAct = new Array();
        $(".multiple-activity").each(function (index, ele) {
            _mulAct.push({
                cityName : $(ele).find('[name=cityId-attr]').find('option:selected').text(),
                cityId : $(ele).find('[name=cityId-attr]').find('option:selected').val(),
                areaNameSelect : $(ele).find('[name=area-attr]').find('option:selected').text(),
                areaNameInput : $(ele).find('[name=area-input-attr]').val(),
                place : $(ele).find('[name=place-attr]').val(),
                endDate : $(ele).find('[name=endDate-attr]').val(),
                price : $(ele).find('[name=price-attr]').val()
            });
        });
        $("#multiActList").val(JSON.stringify(_mulAct));
        return util.serializeForm($('#myForm').serializeArray());
    }

    //表单提交
    function formSubmit(data) {
        if (txz.multipleEvent._serializableActivity()) {
            txz.submitObject(data.elem, function (callBack) {
                var formData = getFormData();
                var action = $("#myForm").attr("action");
                txz.ajaxRequest({
                    method: 'post',
                    url: action,
                    saveCache: true,
                    cacheObj: formcache,
                    params: formData,
                    callBack: function (res) {
                        typeof callBack === 'function' && callBack();
                        if (res.success) {
                            if ($(data.elem).hasClass('preview-btn')) {
                                if ('${empty event.id}' === 'true') {
                                    location.href = '${ctx}/crowdfundMultiple/event/view.do?id=' + res.data;
                                } else {
                                    var $previewFrame = $($('.preview-box').find('iframe')[0].contentWindow
                                        .document).find('iframe');
                                    $previewFrame.attr('src', $previewFrame.attr('src'));
                                }
                            } else {
                                util.layerMsgSuccess("提交成功", function () {
                                    location.href = "${ctx}/crowdfundMultiple/event/list.do";
                                });
                            }
                        } else {
                            util.layerMsgError("提交失败")
                        }
                    }
                })
            });
        }
        return false;
    }

    // 文本编辑器图片上传
    function uEditorUploadCI(editor) {
        txz.openSelImg({
            min: 1,
            type: '<%=TargetType.ZC_ACTIVITY.getCode()%>',
            cb: function (imgs) {
                if (imgs.length) {
                    for (var i = 0, item; i < imgs.length; i++) {
                        item = imgs[i];
                        editor.focus();
                        editor.execCommand('inserthtml', item.htmlStr);
                    }
                }
            }
        })
    }

    function uEditorUploadCIVideo(editor) {
        txz.openSelVideo({
            min: 1,
            type: '<%=TargetType.ZC_ACTIVITY.getCode()%>',
            cb: function (imgs) {
                if (imgs.length) {
                    for (var i = 0, item; i < imgs.length; i++) {
                        item = imgs[i];
                        editor.focus();
                        editor.execCommand('inserthtml', item.htmlStr);
                    }
                }
            }
        })
    }

    function openUploadCI() {
        var picLength = $(".ci-img-list .item").length;
        var maxLength = maxNum - picLength <= 0 ? 0 : maxNum - picLength;
        txz.openSelImg({
            min: 1,
            max: maxLength,
            type: '<%=TargetType.ZC_ACTIVITY.getCode()%>',
            cb: function (imgs) {
                if (imgs.length) {
                    for (var i = 0, item; i < imgs.length; i++) {
                        item = imgs[i];
                        $("#img_list").append('<div class="item" data-url="' + item.path + '">' +
                            '<div class="img-item" style="background-image: url(' + item.path + ')">' +
                            '<i class="layui-icon del-icon" onclick="delQImg(\'' + item.path +
                            '\',this, \'\')">ဇ</i>' +
                            '</div>' +
                            //'<input class="text-item" type="text" placeholder="图片描述" />'+
                            '</div>');
                    }
                }
            }
        })
    }

    function delQImg(picUrl, obj) {
        $(obj).closest(".item").remove();
    }

    function openUploadVideo() {
        txz.openSelVideo({
            min: 1,
            max: 1,
            backVideoOrIframe: 'video',
            type: '<%=TargetType.ZC_ACTIVITY.getCode()%>',
            cb: function (imgs) {
                if (imgs.length) {
                    for (var i = 0, item; i < imgs.length; i++) {
                        item = imgs[i];
                        $("#vide_code").val(item.htmlStr);
                    }
                }
            }
        })
    }

    function clearValue() {
        $("#vide_code").val("");
    }

    function openHiddenShow(title, container) {
        var index = layer.open({
            type: 1,
            area: ['800px', '700px'],
            title: [title, 'text-align:center;'],
            shade: 0.6,
            shadeClose: true,
            content: $(container)
        });
    }


    //加载背景乐列表
    function loadAudioSelect(audioId_val) {
        var array = new Array();
        $.ajax({
            url: '${ctx}/audio/getAudioListAll.do',
            type: 'POST',
            dataType: 'json',
            data: {},
            async: false, // 使用同步的方法
            success: function (res) {
                if (res.success) {
                    var data = res.data;
                    for (var i = 0; i < data.length; i++) {
                        if (audioId_val == data[i].id) {
                            array.push("<option value = '" + data[i].id + "' title='" + data[i].audioUrl +
                                "'  selected='selected'  >" +
                                "" + data[i].audioTitle + "</option>");
                            isShowAudiolabel(data[i].audioUrl);
                        } else {
                            array.push("<option value = '" + data[i].id + "' title='" + data[i].audioUrl +
                                "' >" + data[i].audioTitle + "</option>");
                        }
                    }
                }
            }
        });
        $("#audioId").append(array.join(""));
        form.render('select');
    }

    function isShowAudiolabel(audioUrl_val) {
        if (audioUrl_val != "") {
            $("#audioUrlId").show();
            $("#audioUrlId").children("audio").attr("src", audioUrl_val);
        } else {
            $("#audioUrlId").children("audio").attr("src", "");
            $("#audioUrlId").hide();
        }
    }

    txz.multipleEvent = {
        _init: function () {
            // 计算日期
            txz.multipleEvent._calcEndDate();
            // 初始化日期控件
            txz.multipleEvent._initEndDate();
            // 加载城市列表
            txz.multipleEvent._loadCityList();
        },
        /**
         * 计算日期控件的日期选择范围
         */
        _calcEndDate: function () {
            /*if (${empty event.id}) {
                minEndDate = new Date().Format('yyyy-MM-dd HH:mm:ss');
            } else {
                minEndDate = $("#create_date_str").text();
            }*/
            minEndDate = new Date().Format('yyyy-MM-dd HH:mm:ss');
            maxEndDate = '${memberForm:dateFormat(expirationTime, 'yyyy-MM-dd HH:mm:ss')}';
        },
        /**
         * 提交表单是序列化活动的值成json格式
         * @returns {boolean}
         * @private
         */
        _serializableActivity: function () {
            var _array = [];
            var endDate, checkFlag = true;
            $(".multiple-activity").each(function (index, ele) {
                $(ele).find('[name=endDate-attr]').removeClass('error');
                var endTime = $(ele).find('[name=endDate-attr]').val();
                var price = parseFloat($(ele).find('[name=price-attr]').val());
                var cityId = $(ele).find('[name=cityId-attr]').find('option:selected').val();

                var areaName = $(ele).find('[name=area-attr]').find('option:selected').text();
                if (!areaName) {
                    areaName = $(ele).find('[name=area-input-attr]').val();
                }
                var place = $(ele).find('[name=place-attr]').val();
                var id = $(ele).attr('data-id');

                if (endDate && endTime <= endDate) {
                    $(ele).find('[name=endDate-attr]').focus();
                    $(ele).find('[name=endDate-attr]').addClass('error');
                    util.layerMsgError('当前截止时间要比上场活动的截止时间迟');
                    checkFlag = false;
                    return checkFlag;
                }
                if ('${empty event.id}' == 'true' && util.getTimeMillis(endTime) < util.getTimeMillis()) {

                    $(ele).find('[name=endDate-attr]').focus();
                    $(ele).find('[name=endDate-attr]').addClass('error');
                    util.layerMsgError('截止时间不得早于当前时间');
                    checkFlag = false;
                    return checkFlag;
                }
                if (endTime >= maxEndDate) {
                    $(ele).find('[name=endDate-attr]').focus();
                    $(ele).find('[name=endDate-attr]').addClass('error');
                    util.layerMsgError('截止时间不能超过账户过期时间');
                    checkFlag = false;
                    return checkFlag;
                }

                _array.push({
                    gradation: index + 1,
                    endDate: endTime,
                    price: price,
                    cityId: cityId,
                    area: areaName,
                    place: place,
                    id: id
                });

                endDate = endTime;
            });
            $('[name=multipleActStr]').val(JSON.stringify(_array));
            return checkFlag;
        },
        /**
         * 初始化选中城市和区域
         * @private
         */
        _loadCityAndArea: function () {
            $(".multiple-activity").each(function (index, ele) {
                var parent = $(ele).closest('.multiple-activity');
                var loadData = $(parent).find('[name=area-attr]').attr('data-load-data');
                if (loadData == 'false') {
                    var areaName = $(parent).attr('data-area');
                    var cityName = $(parent).find('[name=cityId-attr]').find('option:selected').text();
                    txz.multipleEvent._loadAreaListByCity(cityName, parent, areaName);
                }
            });
        },
        /**
         * 加载城市列表
         * @private
         */
        _loadCityList: function () {
            txz.ajaxRequest({
                url: '${ctx}/activity/activity/getCitys.do',
                type: 'POST',
                async: false, // 使用同步的方法
                params: {},
                callBack: function (data) {
                    cityArray = data;

                    var str = new Array();
                    str.push('<option value="">请选择城市</option>');
                    if (data.length > 0) {
                        $(".multiple-activity").each(function (index, ele) {
                            var cityId = $(ele).attr('data-cityid');
                            for (var i = 0; i < data.length; i++) {
                                if (cityId && cityId == data[i].id) {
                                    str.push("<option value = '" + data[i].id + "' selected>" + data[i].name + "</option>");
                                } else {
                                    str.push("<option value = '" + data[i].id + "'>" + data[i].name + "</option>");
                                }
                            }
                            $(ele).find("[name=cityId-attr]").html(str.join(''));
                        });
                    }

                    if ('${event.id}' != '') {
                        txz.multipleEvent._loadCityAndArea();
                    }

                    //刷新layForm
                    form.render('select');
                }
            });
        },
        /**
         * 根据城市加载区域列表
         * @param cityName 城市名称
         * @param parent 当前活动对象
         * @param areaName 区域名称
         * @private
         */
        _loadAreaListByCity: function (cityName, parent, areaName) {
            areaName = areaName || '';
            if (cityName == '其他地区') {
                var $areaSelect = $(parent).find('[name=area-attr]');
                $areaSelect.siblings('.layui-form-select').remove();
                $areaSelect.after('<input type="text" name="area-input-attr" placeholder="请填写区域" lay-verify="area_input" class="layui-input" value="' + areaName + '" />');
                $areaSelect.remove();
            } else {
                var $areaInput = $(parent).find('[name=area-input-attr]');
                $areaInput.after('<select name="area-attr" lay-verify="area_select" lay-filter="area" data-load-data="true">\n' +
                    '                            <option value="" title="">请选择区域</option>\n' +
                    '                        </select>');
                $areaInput.remove();
                form.render('select');

                txz.ajaxRequest({
                    url: '${ctx}/activity/activity/getAreaByCityName.do',
                    type: 'POST',
                    async: false, // 使用同步的方法
                    params: {
                        "cityName": cityName
                    },
                    callBack: function (data) {
                        var str = new Array();
                        str.push('<option value="">请选择区域</option>');
                        if (data.length > 0) {
                            for (var i = 0; i < data.length; i++) {
                                if (areaName && areaName == data[i].name) {
                                    str.push("<option value = '" + data[i].name + "' selected='selected'>" + data[i].name + "</option>");
                                } else {
                                    str.push("<option value = '" + data[i].name + "'>" + data[i].name + "</option>");
                                }
                            }
                        }
                        $(parent).find("[name=area-attr]").html(str.join(''));
                        form.render('select');
                    }
                });
            }
        },
        /**
         * 初始化日期
         * @returns {boolean}
         * @private
         */
        _initEndDate: function () {
            $(".multiple-activity").find('[name=endDate-attr]').each(function (index, ele) {
                if ('${isCopy}' == '' && util.getTimeMillis($(ele).val()) < util.getTimeMillis()) {
                    $(ele).prop('disabled', true);
                }

                var id = $(ele).attr('id');
                laydate.render({
                    elem: '#' + id,
                    min: minEndDate,
                    max: maxEndDate || '2099-06-16 23:59',
                    type: 'datetime',
                    format: 'yyyy-MM-dd HH:mm', //日期格式
                    done: function () {
                        $(ele).removeClass('error');
                    }
                });
            });
        },
        /**
         * 添加活动
         * @returns {boolean}
         * @private
         */
        _addActivity: function () {
            var length = $(".multiple-activity").length;
            if (length == 5) {
                util.layerMsgError('最多添加5场活动');
                return false;
            }
            var content = $(".multiple-activity:last");
            var getTpl = $("#multiple_activity_template").html();
            laytpl(getTpl).render({
                num: numArray[length],
                citys: cityArray,
                index: length
            }, function (html) {
                content.after(html);
            });
            length = $(".multiple-activity").length;
            if (length == 5) {
                $("#add_activity").addClass('layui-btn-disabled');
            }
            $(".multiple-activity .activity-opt").removeClass('dn');
            form.render('select');
            txz.multipleEvent._initEndDate();
        },
        /**
         * 删除活动
         * @param that 当前活动
         * @private
         */
        _deleteActivity: function (that) {
            layer.confirm('确认要删除该活动吗？', {
                icon: 3,
                title: '系统提示'
            }, function (index) {
                $(that).closest('.multiple-activity').remove();
                $(".multiple-activity").each(function (index, ele) {
                    $(ele).find('.activity-num').text('活动' + numArray[index]);
                    $(ele).find('[name=endDate-attr]').attr('id', 'activity-end-' + index);
                });
                var length = $('.multiple-activity').length;
                if (length == 2) {
                    $(".multiple-activity").find('.activity-opt').addClass('dn');
                }
                if (length < 5) {
                    $("#add_activity").removeClass('layui-btn-disabled');
                }
                layer.close(index);
            });
        }
    }
</script>
</body>
</html>